<template>
  <div class="home-preview" :style='{"width":"100%","margin":"10px auto"}'>


    <div class="recommend"
         :style='{"padding":"0 120px","margin":"0 0 10px","backgroundSize":"100% 100%","backgroundImage":"url(http://codegen.caihongy.cn/20220903/d909d026946e48b98b65af03392e57e5.png)","height":"880px"}'>
      <div v-if="false" class="idea recommendIdea"
           :style='{"padding":"20px","flexWrap":"wrap","background":"#efefef","justifyContent":"space-between","display":"flex"}'>
        <div class="box1" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
        <div class="box2" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
        <div class="box3" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
        <div class="box4" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
        <div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
        <div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
        <div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
        <div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
        <div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
        <div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
      </div>

      <div class="title"
           :style='{"width":"200px","padding":"30px 0 10px","margin":"10px auto","lineHeight":"54px","textAlign":"center"}'>
        <span :style='{"color":"rgba(0, 0, 0, 1)","fontSize":"30px","fontWeight":"600"}'>酒店客房推荐</span>
      </div>


      <!-- 样式一 -->
      <div class="list list1 index-pv1"
           :style='{"width":"100%","padding":"10px","background":"rgba(216, 216, 216, 1)","height":"650px"}'>
        <div
            :style='{"margin":"10px 20px","overflow":"hidden","borderRadius":"10px","background":"#f5f5f5","display":"inline-block","width":"210px","position":"relative","height":"240px"}'
            v-for="(item,index) in jiudiankefangRecommend" :key="index" @click="toDetail('jiudiankefangDetail', item)"
            class="list-item animation-box">
          <img :style='{"width":"210px","objectFit":"cover","borderRadius":"10px","display":"block","height":"180px"}'
               v-if="preHttp(item.kefangtupian)" :src="item.kefangtupian.split(',')[0]" alt=""/>
          <img :style='{"width":"210px","objectFit":"cover","borderRadius":"10px","display":"block","height":"180px"}'
               v-else :src="baseUrl + (item.kefangtupian?item.kefangtupian.split(',')[0]:'')" alt=""/>
          <div class="name line1"
               :style='{"padding":"10px","overflow":"hidden","color":"rgba(0, 0, 0, 1)","lineHeight":"35px","fontSize":"16px","fontWeight":"550","height":"70px"}'>
            {{ item.kefangmingcheng }}
          </div>
        </div>
      </div>


      <div @click="moreBtn('jiudiankefang')"
           :style='{"border":"0","padding":"5px 0","margin":"-70px auto 0","textAlign":"center","borderWidth":" 0 0 6px","display":"block","width":"110px","lineHeight":"32px","borderStyle":"solid"}'>
        <span :style='{"color":"#000","fontSize":"20px"}'>查看更多</span>
        <i v-if="true" :style='{"color":"#000","fontSize":"20px"}' class="el-icon-d-arrow-right"></i>
      </div>

    </div>


    <div class="lists"
         :style='{"padding":"0 21% 0 23%","margin":"0 0 10px","backgroundSize":"100% 100%","position":"relative","backgroundImage":"url(http://codegen.caihongy.cn/20220903/0e2d47a2b5ff402783480fdb8bf39a2e.png)","height":"700px"}'>
<!--      <div v-if="true" class="idea"
           :style='{"padding":"80px 20px 20px","flexWrap":"wrap","justifyContent":"space-between","display":"flex"}'>
&lt;!&ndash;        <div class="box1" :style='{"width":"28%","background":"#000","height":"60px"}'></div>&ndash;&gt;
        <div class="box2" :style='{"width":"35%","background":"#000","height":"60px"}'></div>
        <div class="box3" :style='{"display":"none"}'></div>
        <div class="box4" :style='{"width":"28%","background":"#000","height":"60px"}'></div>
        <div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
        <div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
        <div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
        <div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
        <div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
        <div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
      </div>-->

      <div class="title"
           :style='{"width":"200px","margin":"-110px auto 20px","lineHeight":"54px","textAlign":"center"}'>
        <span :style='{"color":"rgba(255, 255, 255, 1)","fontSize":"30px"}'>酒店客房展示</span>
      </div>


      <!-- 样式六 -->
      <div class="list list6 index-pv1" :style='{"width":"100%","padding":"10px","display":"flex","height":"auto"}'>
<!--    1    -->
        <div :style='{"width":"28%","margin":"0 35px 0 10px","background":"#fff","height":"350px"}'
             class="list-4-body">
          <div class="box1" :style='{"width":"100%","background":"#000","height":"60px"}'></div>
          <div v-if="jiudiankefangList.length>0" @click="toDetail('jiudiankefangDetail', jiudiankefangList[0])"
               class="list-4-item animation-box item-2"
               :style='{"border":"1px solid #666","padding":"10px","margin":"0 0 20px","overflow":"hidden","width":"100%","position":"relative","height":"170px"}'>
            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-if="preHttp(jiudiankefangList[0].kefangtupian)"
                 :src="jiudiankefangList[0].kefangtupian.split(',')[0]" alt=""/>
            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-else
                 :src="baseUrl + (jiudiankefangList[0].kefangtupian?jiudiankefangList[0].kefangtupian.split(',')[0]:'')"
                 alt=""/>
            <div class="line1 list-4-item-title"
                 :style='{"padding":"0 10px","overflow":"hidden","color":"rgba(158, 158, 158, 1)","top":"50px","textAlign":"center","width":"60%","lineHeight":"150px","fontSize":"16px","height":"150px"}'>
              <div>{{ jiudiankefangList[0].kefangmingcheng }}</div>
            </div>
          </div>
          <div v-if="jiudiankefangList.length>1" @click="toDetail('jiudiankefangDetail', jiudiankefangList[1])"
               class="list-4-item animation-box item-3"
               :style='{"border":"1px solid #000","padding":"10px","margin":"20px 0 0","overflow":"hidden","background":"#fff","width":"100%","position":"relative","height":"170px"}'>
            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-if="preHttp(jiudiankefangList[1].kefangtupian)"
                 :src="jiudiankefangList[1].kefangtupian.split(',')[0]" alt=""/>
            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-else
                 :src="baseUrl + (jiudiankefangList[1].kefangtupian?jiudiankefangList[1].kefangtupian.split(',')[0]:'')"
                 alt=""/>
            <div class="line1 list-4-item-title"
                 :style='{"padding":"0 10px","overflow":"hidden","color":"rgba(158, 158, 158, 1)","top":"50px","textAlign":"center","width":"60%","lineHeight":"150px","fontSize":"16px","height":"150px"}'>
              <div>{{ jiudiankefangList[1].kefangmingcheng }}</div>
            </div>
          </div>
        </div>
<!--       2 -->

        <div :style='{"width":"35%","margin":"0 35px 0 10px","background":"#fff","height":"420px"}'
             class="list-4-body">
          <div class="box1" :style='{"width":"100%","background":"#000","height":"60px"}'></div>
          <div v-if="jiudiankefangList.length>2" class="list-4-item animation-box item-1"
               @click="toDetail('jiudiankefangDetail', jiudiankefangList[2])"
               :style='{"padding":"10px","margin":"0 33px 0 1%","overflow":"hidden","width":"100%","position":"relative","height":"360px"}'>
            <img :style='{"width":"100%","objectFit":"cover","borderRadius":"100px","float":"left","height":"200px"}'
                 v-if="preHttp(jiudiankefangList[2].kefangtupian)" :src="jiudiankefangList[2].kefangtupian.split(',')[0]"
                 alt=""/>
            <img :style='{"width":"100%","objectFit":"cover","borderRadius":"100px","float":"left","height":"200px"}'
                 v-else
                 :src="baseUrl + (jiudiankefangList[2].kefangtupian?jiudiankefangList[2].kefangtupian.split(',')[0]:'')"
                 alt=""/>
            <div class="line1 list-4-item-title"
                 :style='{"overflow":"hidden","color":"rgba(158, 158, 158, 1)","textAlign":"center","width":"100%","lineHeight":"140px","fontSize":"18px","height":"140px"}'>
              <div>{{ jiudiankefangList[2].kefangmingcheng }}</div>
            </div>
          </div>
        </div>


<!--     3   -->
        <div :style='{"width":"28%","margin":"0px 1% 0 20px","background":"#fff","height":"360px"}' class="list-body">
<!--          <div v-if="jiudiankefangList.length>3" @click="toDetail('jiudiankefangDetail', jiudiankefangList[3])"
               class="list-4-item animation-box item-4"
               :style='{"border":"1px solid #666","padding":"10px","margin":"0 0 20px","overflow":"hidden","width":"275px","position":"relative","height":"170px"}'>

            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-if="preHttp(jiudiankefangList[3].kefangtupian)"
                 :src="jiudiankefangList[3].kefangtupian.split(',')[0]" alt=""/>
            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-else
                 :src="baseUrl + (jiudiankefangList[3].kefangtupian?jiudiankefangList[3].kefangtupian.split(',')[0]:'')"
                 alt=""/>
            <div class="line1 list-4-item-title"
                 :style='{"padding":"0 10px","overflow":"hidden","color":"rgba(158, 158, 158, 1)","top":"50px","textAlign":"center","width":"60%","lineHeight":"150px","fontSize":"16px","height":"150px"}'>
              <div>{{ jiudiankefangList[3].kefangmingcheng }}</div>
            </div>
          </div>
          <div v-if="jiudiankefangList.length>4" @click="toDetail('jiudiankefangDetail', jiudiankefangList[4])"
               class="list-4-item animation-box item-5"
               :style='{"border":"1px solid #666","padding":"10px","margin":"20px 0 0","overflow":"hidden","width":"275px","position":"relative","height":"170px"}'>
            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-if="preHttp(jiudiankefangList[4].kefangtupian)"
                 :src="jiudiankefangList[4].kefangtupian.split(',')[0]" alt=""/>
            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-else
                 :src="baseUrl + (jiudiankefangList[4].kefangtupian?jiudiankefangList[4].kefangtupian.split(',')[0]:'')"
                 alt=""/>
            <div class="line1 list-4-item-title"
                 :style='{"padding":"0 10px","overflow":"hidden","color":"rgba(158, 158, 158, 1)","textAlign":"center","width":"60%","lineHeight":"150px","fontSize":"16px","height":"150px"}'>
              <div>{{ jiudiankefangList[4].kefangmingcheng }}</div>
            </div>
          </div>-->
          <div class="box1" :style='{"width":"100%","background":"#000","height":"60px"}'></div>
          <div v-if="jiudiankefangList.length>0" @click="toDetail('jiudiankefangDetail', jiudiankefangList[0])"
               class="list-4-item animation-box item-2"
               :style='{"border":"1px solid #666","padding":"10px","margin":"0 0 20px","overflow":"hidden","width":"100%","position":"relative","height":"170px"}'>
            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-if="preHttp(jiudiankefangList[0].kefangtupian)"
                 :src="jiudiankefangList[0].kefangtupian.split(',')[0]" alt=""/>
            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-else
                 :src="baseUrl + (jiudiankefangList[0].kefangtupian?jiudiankefangList[0].kefangtupian.split(',')[0]:'')"
                 alt=""/>
            <div class="line1 list-4-item-title"
                 :style='{"padding":"0 10px","overflow":"hidden","color":"rgba(158, 158, 158, 1)","top":"50px","textAlign":"center","width":"60%","lineHeight":"150px","fontSize":"16px","height":"150px"}'>
              <div>{{ jiudiankefangList[0].kefangmingcheng }}</div>
            </div>
          </div>
          <div v-if="jiudiankefangList.length>1" @click="toDetail('jiudiankefangDetail', jiudiankefangList[1])"
               class="list-4-item animation-box item-3"
               :style='{"border":"1px solid #000","padding":"10px","margin":"20px 0 0","overflow":"hidden","background":"#fff","width":"100%","position":"relative","height":"170px"}'>
            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-if="preHttp(jiudiankefangList[1].kefangtupian)"
                 :src="jiudiankefangList[1].kefangtupian.split(',')[0]" alt=""/>
            <img :style='{"width":"40%","objectFit":"cover","borderRadius":"80px","float":"left","height":"150px"}'
                 v-else
                 :src="baseUrl + (jiudiankefangList[1].kefangtupian?jiudiankefangList[1].kefangtupian.split(',')[0]:'')"
                 alt=""/>
            <div class="line1 list-4-item-title"
                 :style='{"padding":"0 10px","overflow":"hidden","color":"rgba(158, 158, 158, 1)","top":"50px","textAlign":"center","width":"60%","lineHeight":"150px","fontSize":"16px","height":"150px"}'>
              <div>{{ jiudiankefangList[1].kefangmingcheng }}</div>
            </div>
          </div>
        </div>
      </div>


      <div @click="moreBtn('jiudiankefang')"
           :style='{"border":"0","margin":"30px auto","textAlign":"center","borderWidth":"0 0 5px","display":"block","width":"110px","lineHeight":"32px","borderStyle":"solid"}'>
        <span :style='{"color":"rgba(0, 0, 0, 1)","fontSize":"20px"}'>查看更多</span>
        <i v-if="true" :style='{"color":"#000","fontSize":"20px"}' class="el-icon-d-arrow-right"></i>
      </div>


    </div>


  </div>
</template>

<script>
export default {
  //数据集合
  data() {
    return {
      baseUrl: '',
      newsList: [],
      jiudiankefangRecommend: [],

      jiudiankefangList: [],
    }
  },
  created() {
    this.baseUrl = this.$config.baseUrl;
    this.getList();
  },
  //方法集合
  methods: {
    preHttp(str) {
      return str && str.substr(0, 4) == 'http';
    },
    getList() {
      let autoSortUrl = "";
      autoSortUrl = "jiudiankefang/autoSort";
      this.$http.get(autoSortUrl, {
        params: {
          page: 1,
          limit: 8,
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.jiudiankefangRecommend = res.data.data.list;


          // 商品列表样式五

        }
      });

      this.$http.get('jiudiankefang/list', {
        params: {
          page: 1,
          limit: 6,
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.jiudiankefangList = res.data.data.list;

          // 商品列表样式五

        }
      });
    },
    toDetail(path, item) {
      this.$router.push({path: '/index/' + path, query: {detailObj: JSON.stringify(item)}});
    },
    moreBtn(path) {
      this.$router.push({path: '/index/' + path});
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.home-preview {

  .recommend {
    .list3 .swiper-button-prev {
      left: 10px;
      right: auto;
    }

    .list3 .swiper-button-prev::after {
      color: rgb(64, 158, 255);
    }

    .list3 .swiper-button-next {
      left: auto;
      right: 10px;
    }

    .list3 .swiper-button-next::after {
      color: rgb(64, 158, 255);
    }

    .list5 .swiper-button-prev {
      left: 10px;
      right: auto;
    }

    .list5 .swiper-button-prev::after {
      color: rgb(64, 158, 255);
    }

    .list5 .swiper-button-next {
      left: auto;
      right: 10px;
    }

    .list5 .swiper-button-next::after {
      color: rgb(64, 158, 255);
    }

    .list5 {
      .swiper-slide-prev {
        position: relative;
        z-index: 3;
      }

      .swiper-slide-next {
        position: relative;
        z-index: 3;
      }

      .swiper-slide-active {
        position: relative;
        z-index: 5;
      }
    }

    .index-pv1 .animation-box {
      transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
      z-index: initial;
    }

    .index-pv1 .animation-box:hover {
      transform: scale(1.05);
      -webkit-perspective: 1000px;
      perspective: 1000px;
      transition: 0.3s;
      z-index: 1;
    }

    .index-pv1 .animation-box img {
      transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    .index-pv1 .animation-box img:hover {
      -webkit-perspective: 1000px;
      perspective: 1000px;
      transition: 0.3s;
    }
  }

  .news {
    .list3 .swiper-button-prev {
      left: 10px;
      right: auto;
    }

    .list3 .swiper-button-prev::after {
      color: rgb(64, 158, 255);
    }

    .list3 .swiper-button-next {
      left: auto;
      right: 10px;
    }

    .list3 .swiper-button-next::after {
      color: rgb(64, 158, 255);
    }

    .list6 .swiper-button-prev {
      left: 10px;
      right: auto;
    }

    .list6 .swiper-button-prev::after {
      color: rgb(64, 158, 255);
    }

    .list6 .swiper-button-next {
      left: auto;
      right: 10px;
    }

    .list6 .swiper-button-next::after {
      color: rgb(64, 158, 255);
    }

    .index-pv1 .animation-box {
      transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
      z-index: initial;
    }

    .index-pv1 .animation-box:hover {
      transform: scale(1.02) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
      -webkit-perspective: 1000px;
      perspective: 1000px;
      transition: 0.3s;
      z-index: 1;
    }

    .index-pv1 .animation-box img {
      transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    .index-pv1 .animation-box img:hover {
      -webkit-perspective: 1000px;
      perspective: 1000px;
      transition: 0.3s;
    }
  }

  .lists {
    .list3 .swiper-button-prev {
      left: 10px;
      right: auto;
    }

    .list3 .swiper-button-prev::after {
      color: rgb(64, 158, 255);
    }

    .list3 .swiper-button-next {
      left: auto;
      right: 10px;
    }

    .list3 .swiper-button-next::after {
      color: rgb(64, 158, 255);
    }

    .list5 .swiper-button-prev {
      left: 10px;
      right: auto;
    }

    .list5 .swiper-button-prev::after {
      color: rgb(64, 158, 255);
    }

    .list5 .swiper-button-next {
      left: auto;
      right: 10px;
    }

    .list5 .swiper-button-next::after {
      color: rgb(64, 158, 255);
    }

    .list5 {
      .swiper-slide-prev {
        position: relative;
        z-index: 3;
      }

      .swiper-slide-next {
        position: relative;
        z-index: 3;
      }

      .swiper-slide-active {
        position: relative;
        z-index: 5;
      }
    }

    .index-pv1 .animation-box {
      transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
      z-index: initial;
    }

    .index-pv1 .animation-box:hover {
      transform: scale(1.03) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
      -webkit-perspective: 1000px;
      perspective: 1000px;
      transition: 0.3s;
      z-index: 1;
    }

    .index-pv1 .animation-box img {
      transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    .index-pv1 .animation-box img:hover {
      -webkit-perspective: 1000px;
      perspective: 1000px;
      transition: 0.3s;
    }
  }
}
</style>
